<template>
    <div id="login">
        <a-dropdown v-if="$store.state.login">
            <a-button type="primary" @click="showModal" class="user-login" @click.stop>
                登录/注册
            </a-button>
            <a-menu slot="overlay">
                <a-menu-item>
                    <a href="javascript:;">个人中心</a>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:;">我的课程</a>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:;">我的订单</a>
                </a-menu-item>
            </a-menu>
        </a-dropdown>
        <a-dropdown v-else>
            <div class="user-info-box" @click.stop>
                <div class="user-avatar">
                    <img :src="$store.state.userInfo.avatarUrl" alt="">
                </div>
                <div class="user-info">
                    <div>{{ $store.state.userInfo.nickname }}</div>
                    <div>青铜会员</div>
                </div>
            </div>
            <a-menu slot="overlay">
                <a-menu-item>
                    <router-link to="/personal">个人中心</router-link>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:;">我的课程</a>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:;">我的订单</a>
                </a-menu-item>
                <a-menu-item @click="loginOut">
                    <a href="javascript:;">退出登录</a>
                </a-menu-item>
            </a-menu>
        </a-dropdown>
        <a-modal v-model="visible" title="Basic Modal" @ok="handleOk" :footer="null">
            <div class="login-modal">
                <ul>
                    <li :class="{ active: currentLoginType === 'normal' }" @click="changeLoginType('normal')">
                        普通登录
                    </li>
                    <li :class="{ active: currentLoginType === 'phone' }" @click="changeLoginType('phone')">
                        手机登录
                    </li>
                </ul>
                <form class="login-form" @submit.prevent="handleOk">
                    <div v-if="currentLoginType === 'normal'">
                        <div class="ant-form-item">
                            <input type="text" placeholder="请输入账户名" v-model="username">
                        </div>
                        <div class="ant-form-item">
                            <input type="password" placeholder="请输入密码" v-model="password">
                        </div>
                    </div>
                    <div v-else>
                        <div class="ant-form-item">
                            <input type="text" placeholder="请输入手机号" v-model="phoneNumber">
                        </div>
                        <div class="ant-form-item">
                            <a-row :gutter="16">
                                <a-col :span="18">
                                    <input type="text" placeholder="请输入验证码" v-model="phoneCode">
                                </a-col>
                                <a-col :span="6">
                                    <a-button type="primary" @click="getPhoneVerificationCode">
                                        获取验证码
                                    </a-button>
                                </a-col>
                            </a-row>
                        </div>
                    </div>
                    <div class="login-button-wrapper">
                        <button type="submit">登录</button>
                    </div>
                    <!-- 将忘记密码和立即注册放在单独容器 -->
                    <div class="login-form-action">
                        <a href="#" class="a-1">忘记密码? </a>
                        <a href="#" class="a-2" @click.prevent="goToRegister">立即注册!</a>
                    </div>
                </form>
            </div>
        </a-modal>
        <a-modal v-model="registerVisible" title="普通注册" @ok="handleRegister" @cancel="handleRegisterCancel">
            <a-form class="register-form" @submit.prevent="handleRegister">
                <a-form-item label="账户名">
                    <a-input placeholder="请输入账户名(6-20位，非纯数字)!" v-model="registerUsername" />
                </a-form-item>
                <a-form-item label="密码">
                    <a-input-password placeholder="请输入你的密码(6-20位，非汉字)!" v-model="registerPassword" />
                </a-form-item>
                <a-form-item label="确认密码">
                    <a-input-password placeholder="请再次输入你的密码!" v-model="registerConfirmPassword" />
                </a-form-item>
                <a-form-item label="昵称">
                    <a-input placeholder="请输入你的昵称!" v-model="registerNickname" />
                </a-form-item>
                <a-form-item label="手机号">
                    <a-input-group>
                        <template #addonBefore>+86</template>
                        <a-input placeholder="请输入你的手机号" v-model="registerPhone" />
                    </a-input-group>
                </a-form-item>
                <a-form-item label="验证码">
                    <a-row :gutter="16">
                        <a-col :span="18">
                            <a-input placeholder="请输入验证码" v-model="registerCode" />
                        </a-col>
                        <a-col :span="6">
                            <a-button type="primary" @click="getVerificationCode">
                                获取验证码
                            </a-button>
                        </a-col>
                    </a-row>
                </a-form-item>
            </a-form>
            <template #footer>
                <span @click="goToLogin" style="cursor: pointer; color: #1890ff; margin-right: 16px;">
                    去登陆
                </span>
            </template>
        </a-modal>
    </div>

</template>


<script>
import { getLoginInfo } from '@/api/request';

export default {
    name: 'LoginView1',
    components: {

    },
    data() {
        return {
            visible: false,
            username: '',
            password: '',
            registerVisible: false,
            currentLoginType: 'normal', // 当前登录方式，默认普通登录
            phoneNumber: '',
            phoneCode: '',
            registerUsername: '',
            registerPassword: '',
            registerConfirmPassword: '',
            registerNickname: '',
            registerPhone: '',
            registerCode: ''
        }
    },
    methods: {
        showModal() {
            this.visible = true;
        },
        handleOk() {
            getLoginInfo(this.username, this.password)
                .then(res => {
                    if (res.code === 0) {
                        this.visible = false;
                        this.$store.commit('setUserInfo', res.userInfo)
                        this.$store.commit('setLogin', false)
                    } else {
                        console.error('登录失败，错误码：', res.code); // 输出错误码
                    }
                })
                .catch(error => {
                    console.error('登录请求出错：', error); // 输出请求错误信息
                });
        },
        loginOut() {
            this.$store.commit('setUserInfo', {})
            this.$store.commit('setLogin', true)
            localStorage.clear()
        },
        goToRegister() {
            this.visible = false;
            this.registerVisible = true;
        },
        changeLoginType(type) {
            this.currentLoginType = type;
        },
        getPhoneVerificationCode() {
            // 实现获取手机验证码逻辑
            console.log('获取手机验证码，手机号：', this.phoneNumber);
        },
        // 补充去登录方法
        goToLogin() {
            this.registerVisible = false;
            this.visible = true;
        },
        // goToPersonal() {
        //     this.$router.push('/personal');
        // }
    },
    created() {

    }
}
</script>
<style lang="scss" scoped>
.user-login {
    color: rgb(53, 199, 222);
    width: 94px;
    height: 30px;
    background: #fff;
    // -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
    border-radius: 15px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
}

.user-info-box {
    display: flex;

    .user-avatar {
        margin-right: 5px;
        width: 42px;
        height: 42px;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .user-info {
        width: 60px;

        >div:first-of-type {
            font-size: 14px;
            font-weight: bold;
        }

        >div:nth-of-type(2) {
            color: #ab753f;
            font-weight: bold;
        }
    }
}


.userApproveItem {
    color: black !important;
    padding: 5px 10px !important;
}

.userApproveItem a {
    color: black !important;
}

.ant-popover-inner-content {
    padding: 5px !important;
}

.userApproveItem:hover,
.userApproveItem a:hover {
    background-color: rgb(230, 255, 243) !important;
    color: rgb(0, 207, 140) !important;
}

.ant-popover {
    z-index: 9999; // 设置较高的 z-index 值，确保弹出框显示在最上层
    display: block !important; // 强制显示弹出框，用于调试
}

// 普通登录
.login-modal {
    padding: 20px;

    ul {
        display: flex;
        justify-content: space-around;
        list-style: none;
        padding: 0;
        margin-bottom: 20px;

        li {
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            color: #666;
            padding: 5px 10px;
            border-bottom: 2px solid transparent;

            &:hover {
                color: #1890ff;
            }

            &:active {
                color: #096dd9;
            }

            &.active {
                color: #1890ff;
                border-bottom-color: #1890ff;
            }
        }
    }

    .login-form {
        .ant-form-item {
            margin-bottom: 20px;

            input {
                width: 100%;
                padding: 10px 15px;
                border: 1px solid #d9d9d9;
                border-radius: 4px;
                font-size: 14px;

                &:focus {
                    border-color: #1890ff;
                    outline: none;
                    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
                }
            }
        }

        // 新增登录按钮容器样式
        .login-button-wrapper {
            margin-bottom: 10px;
            text-align: center;

            button {
                padding: 8px 20px;
                background-color: #1890ff;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                width: 100%;

                &:hover {
                    background-color: #40a9ff;
                }

                &:active {
                    background-color: #096dd9;
                }
            }
        }

        // 修改登录操作区域样式
        .login-form-action {
            display: flex;
            justify-content: space-between;
            align-items: center;

            a {
                color: #1890ff;
                text-decoration: none;
                font-size: 14px;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

// 注册
.register-form {
    padding: 10px 20px;

    .ant-form-item {
        margin-bottom: 24px;

        .ant-input,
        .ant-input-password {
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;

            &:focus {
                border-color: #1890ff;
                outline: none;
                box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            }
        }
    }

    .ant-input-group {
        .ant-input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .ant-input-group-addon {
            background-color: #fafafa;
            border: 1px solid #d9d9d9;
            border-right: none;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            padding: 0 12px;
            display: flex;
            align-items: center;
        }
    }

    .ant-row {
        .ant-btn {
            width: 100%;
            padding: 8px 0;
            border-radius: 4px;

            &:hover {
                background-color: #40a9ff;
            }

            &:active {
                background-color: #096dd9;
            }
        }
    }
}

// 注册弹窗底部样式
.a-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 24px;

    span {
        margin-right: 16px;

        &:hover {
            text-decoration: underline;
        }
    }

    .ant-btn {
        margin-left: 8px;
        padding: 6px 16px;
        border-radius: 4px;
    }
}
</style>